<template>
  <view>
    <!-- #ifndef APP-NVUE -->
    <view class="loadingView">
      <view class="load-box">
        <view class="load-item load-item1" style="background-color: #f63d3a"></view>
        <view class="load-item load-item2" style="background-color: #4cd964"></view>
        <view class="load-item load-item3" style="background-color: #5c6bc0"></view>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
    <view class="loadingView">
      <view class="loader" ref="loader"></view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation')
// #endif
// #ifdef APP-NVUE
import nvueMixinfrom from '@/common/mixin/nvueMixin.js'
// #endif
export default {
  // #ifdef APP-NVUE
  mixins: [nvueMixinfrom],
  // #endif
  data() {
    return {}
  },
  created() {
    // #ifdef APP-NVUE
    this.rotateAvatar1()
    // #endif
  },
  methods: {
    /* nvue  loading动画 */
    rotateAvatar1() {
      setTimeout(() => {
        let testEl = this.$refs['loader']
        animation.transition(
          testEl,
          {
            styles: {
              transform: 'rotate(0)',
            },
            duration: 10, //ms
            timingFunction: 'linear',
            delay: 0, //ms
          },
          () => {
            this.rotateAvatar2()
          }
        )
      }, 50)
    },
    rotateAvatar2() {
      let testEl = this.$refs['loader']
      animation.transition(
        testEl,
        {
          styles: {
            transform: 'rotate(360)',
          },
          duration: 30000, //ms
          timingFunction: 'linear',
          delay: 0, //ms
        },
        () => {
          this.rotateAvatar1()
        }
      )
    },
  },
}
</script>

<style>
/* #ifndef APP-NVUE */
/* loading动画 */
.load-box {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.load-item {
  width: 35rpx;
  height: 35rpx;
  border-radius: 35rpx;
  background-color: #000000;
  margin: 0 5rpx;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/* loading动画2 */
.load-item1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.load-item2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
/* #endif */
.loader {
  border: 16rpx solid #f3f3f3;
  border-radius: 50%;
  border-top: 16rpx solid #fda543;
  width: 100rpx;
  height: 100rpx;
  /* #ifndef APP-NVUE */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  /* #endif */
}
/* #ifndef APP-NVUE */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* #endif */
</style>
